<!--
 * @author: sanbao
 * @Date: 2022-07-29 14:31:37
-->
<style lang='scss' scoped>
.index {
  .top {
    .banxin_center {
      height: 520px;
      padding: 20px 0;
      :deep(.el-carousel__container) {
        height: 520px !important;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .list {
    background-color: #ccc;
    .banxin_center {
      display: flex;
      .left {
        flex: 1;
        height: 730px;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
        .fleximg {
          width: 100%;
          height: 48.5%;
          vertical-align: middle;
          transition: all 0.3s;
        }
        .fleximgbottom {
          margin-top: 20px;
        }
      }
      .fleximg:hover {
        box-shadow: 0 16px 32px 0 rgb(69, 66, 66); /* 鼠标悬浮时盒子出现的阴影 */
        transform: translate(0, -10px); /* 鼠标悬浮时盒子上移10px */
      }
      .right {
        flex: 4;
      }
    }
    h2 {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 18px;
        color: rgb(27, 25, 25);
        font-weight: normal;
        span {
          display: inline-block;
          margin: 0 5px;
        }
        .active {
          color: red;
        }
      }
    }
  }
  header {
    padding-bottom: 10px;
  }
}
</style>

<template>
  <div class="index">
    <div class="top">
      <div class="banxin_center">
        <el-carousel>
          <el-carousel-item v-for="(item, index) in carousellist" :key="index">
            <!-- <img
            :src="require('http://101.132.181.9:3000/' + `${item.imgPath}`)"
          /> -->
            <img :src="'http://101.132.181.9:3000/' + `${item.imgPath}`" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <header>
      <div class="list">
        <h2 class="banxin_center">手机</h2>
        <div class="banxin_center">
          <div class="left">
            <img
              src="http://101.132.181.9:3000/public/imgs/phone/phone.png"
              alt=""
            />
          </div>
          <div class="right">
            <my-list :list="categorya"></my-list>
          </div>
        </div>
      </div>
      <div class="list">
        <h2 class="banxin_center">
          <span>家电</span>
          <p>
            <span
              @mouseenter="mouseentera((index = 1))"
              :class="{ active: mouseenteraindex == 1 }"
            >
              热门
            </span>
            <span
              @mouseenter="mouseentera((index = 2))"
              :class="{ active: mouseenteraindex == 2 }"
            >
              电视音频
            </span>
          </p>
        </h2>
        <div class="banxin_center">
          <div class="left">
            <img
              src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png"
              alt=""
              class="fleximg"
            />
            <img
              src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png"
              alt=""
              class="fleximg fleximgbottom"
            />
          </div>
          <div class="right">
            <my-list :list="categorybAll"></my-list>
          </div>
        </div>
      </div>
      <div class="list">
        <h2 class="banxin_center">
          <span>配件</span>
          <p>
            <span
              @mouseenter="mouseenterb((index = 1))"
              :class="{ active: mouseenterbindex == 1 }"
            >
              热门
            </span>
            <span
              @mouseenter="mouseenterb((index = 2))"
              :class="{ active: mouseenterbindex == 2 }"
            >
              保护套
            </span>
            <span
              @mouseenter="mouseenterb((index = 3))"
              :class="{ active: mouseenterbindex == 3 }"
            >
              充电器
            </span>
          </p>
        </h2>
        <div class="banxin_center">
          <div class="left">
            <img
              src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png"
              alt=""
              class="fleximg"
            />
            <img
              src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png"
              alt=""
              class="fleximg fleximgbottom"
            />
          </div>
          <div class="right">
            <my-list :list="categorydAll"></my-list>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import Model from "@/api";
import MyList from "@/components/child/MyList.vue";
export default {
  components: { MyList },
  setup() {
    onMounted(() => {
      getcarousellist();
      getPromoProductlist({ categoryName: "手机" });
      getPromoProductlist({ categoryName: "电视机" });
      getPromoProductlist({ categoryName: "保护套" });
      getPromoProductlist({ categoryName: "充电器" });
      getgetHotProduct({ categoryName: ["电视机", "空调", "洗衣机"] });
      getgetHotProduct({ categoryName: ["电视机", "空调", "洗衣机"] });
    });
    const data = reactive({
      mouseenteraindex: 1,
      mouseenterbindex: 1,
      // 轮播图
      carousellist: [],
      // 手机数据
      categorya: [],
      // 家电数据
      categorybAll: [],
      categoryb: [],
      categoryc: [],
      //
      categorydAll: [],
      categoryd: [],
      categorye: [],
      categoryg: [],
    });
    // 轮播图
    const getcarousellist = async () => {
      const response = await Model.getcarousellist();
      data.carousellist = response.data.carousel;
    };
    // 数据
    const getPromoProductlist = async (list) => {
      const response = await Model.getPromoProductlist(list);
      if (list.categoryName == "手机") {
        data.categorya = response.data.Product;
      } else if (list.categoryName == "电视机") {
        data.categorybAll = response.data.Product;
        data.categoryb = response.data.Product;
      } else if (list.categoryName == "保护套") {
        data.categoryc = response.data.Product;
      } else if (list.categoryName == "充电器") {
        data.categoryd = response.data.Product;
      }
    };
    const getgetHotProduct = async (list) => {
      const response = await Model.getgetHotProduct(list);
      data.categorydAll = response.data.Product;
      data.categorye = response.data.Product;
      data.categoryg = response.data.Product;
    };
    const mouseentera = (index) => {
      data.mouseenteraindex = index;
      if (index == 1) {
        data.categorybAll = data.categoryb;
      } else if (index == 2) {
        data.categorybAll = data.categoryc;
      }
    };
    const mouseenterb = (index) => {
      data.mouseenterbindex = index;
      if (index == 1) {
        data.categorydAll = data.categorye;
      } else if (index == 2) {
        data.categorydAll = data.categoryd;
      } else if (index == 3) {
        data.categorydAll = data.categoryg;
      }
    };
    return {
      ...toRefs(data),
      mouseentera,
      mouseenterb,
    };
  },
};
</script>

